var RepairSalarySetting = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div class="repair-setting-search-form">
        <el-form inline label-width="auto">
          <el-form-item label="维修评级">
            <el-input class="search-input" v-model="search.salaryType" placeholder="请输入维修评级"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select clearable class="search-input" v-model="search.status" placeholder="请选择状态">
              <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    `;

    return {
      props: {
        search: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {
          statusList: i18n.getDropDown('machineRepair.repairSetting.status', [1, 0])
        };
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="repair-salary-setting repair-setting-item" v-loading.fullscreen.lock="loading">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addSetting">新增</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>

      <div class="repair-setting-table-div">
        <el-table fit stripe border :data="salaryList" style="width: 100%" height="parent">
          <el-table-column label="维修评级" prop="salaryType" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="维修薪资" prop="salary" min-width="120px" align="center"></el-table-column>
          <el-table-column label="状态" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('machineRepair.repairSetting.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="creater" min-width="120px" align="center"></el-table-column>
          <el-table-column label="创建时间" prop="creater" width="140px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateSetting(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>

      <el-dialog :title="formType==='add'?'新增维修薪资':'修改维修薪资'" :visible.sync="openForm" top="calc(50vh - 150px)" width="400px"
        @closed="formClosed">
        <div style="height:210px;overflow:auto">
          <repair-salary-form v-if="openForm" :salary="selectSalary" :type="formType" @save-success="saveSuccess"></repair-salary-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    data: function () {
      var search = {
        salaryType: '',
        status: 1
      };
      return {
        loading: false,
        salaryList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        openForm: false,
        formType: '',
        selectSalary: null,
        i18n: i18n,
        moment: moment
      };
    },

    created: function () {
      this.setSalaryList(true);
    },

    methods: {
      setSalaryList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          type: 'st'
        };

        var search = this.search;
        var salaryType = search.salaryType.trim();
        if (salaryType !== '') {
          postData.salaryType = salaryType;
        }

        var status = search.status;
        if (status !== '') {
          postData.status = status;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/getBasicInfoForSalaryList', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var salaryList = res.returnData;

          self.salaryList = salaryList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setSalaryList(true);
      },

      pageChange: function () {
        this.setSalaryList();
      },

      addSetting: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateSetting:function(salary){
        this.selectSalary = salary;
        this.formType = 'update';
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setSalaryList();
      },

      formClosed: function () {
        this.formType = '';
        this.selectSalary = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      RepairSalaryForm: RepairSalaryForm
    },

    template: template
  };
}();
